<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过 attribute 向着色器传递数据</title>
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
<canvas id="webgl" width="512" height="512"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>

<script>
    (function () {

        // 获取canvas对象
        var canvas = document.getElementById('webgl');

        // 获取webgl 上下文对象
        var gl = getWebGLContext(canvas);

        // 顶点着色器
        var vertex_shader_source = '' +
            'attribute vec4 a_Position;' +
            'void main() {' +
            '   gl_Position = a_Position;' +
            '   gl_PointSize = 10.0;' +
            '}';
        // 片元着色器
        var fragment_shader_source = '' +
            'void main() {' +
            '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' +
            '}';

        // 初始化着色器
        if (!initShaders(gl, vertex_shader_source, fragment_shader_source)) {
            console.log('初始化着色器失败！');
            return false;
        }

        // 获取 attribute 变量 a_Position 的存储地址
        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

        if (a_Position < 0) {
            console.log('获取 a_Position 变量地址失败!');
            return false;
        }

        // 将顶点位置传递给 attribute 变量
        // gl.vertexAttrib1f(a_Position, -0.5);
        // gl.vertexAttrib2f(a_Position, -0.5, -0.5);
        // gl.vertexAttrib3f(a_Position, -0.5, -0.5, 0.0);
        // gl.vertexAttrib4f(a_Position, -0.5, -0.5, 0.0, 1.0);

        var positions = new Float32Array([0.5, 0.0, 0.0, 1.0]);
        gl.vertexAttrib4fv(a_Position, positions);

        // 指定需要清除的颜色
        gl.clearColor(0.0, 0.5, 0.5, 1.0);

        // 清除颜色
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 绘制顶点
        gl.drawArrays(gl.POINTS, 0, 1);

    }());


</script>
</html>